<template>
<!--
 * @FileDescription: 出入高峰期
 * @author Sun Yan
 * @Date $ 
-->
<div class="academy-peak-period-container">
  <module-card-title title="出入最高峰时段" use-time :on-change="onTimeChange">
    <div ref="echartsBox" style="width: 100%;height: 270px"></div>
  </module-card-title>
</div>
</template>
<script>
 import {throttle} from "@u";

 /**
  * @description: 方法描述
  * @param {参数类型} 参数名称
  * @param {参数类型} 参数名称
  * @return void
  */

 export default {
   name: "academy-peak-period",
   props: {
     options: {
       type: Object,
       default: function () {
         return {
           // title: {
           //   text: '折线图堆叠',
           //   show: false,
           // },
           // tooltip: {
           // extraCssText: 'z-index: 2',

           //   trigger: 'axis'
           // },

           grid: {
             show: true,
             right: 20,
             left: 40,
             top: 50,
             bottom: 50,
             borderWidth:'0'
             // containLabel: true
           },

           color: ['#52ffff', '#48b87f', '#f7d673'],
           legend: {
             data: ['北里莫', '交换生', '教职工'],
             top: 5,
             right: 0,
             itemHeight: 9,//改变圆圈大小
             icon: "circle",
             textStyle: {
               color: '#FFF'  // 图例文字颜色
             }
           },

           // 下载
           // toolbox: {
           //   feature: {
           //     saveAsImage: {}
           //   }
           // },

           tooltip: {
             extraCssText: 'z-index: 2',
             trigger: 'axis',
             axisPointer: {
               type: 'cross',
               label: {
                 backgroundColor: '#6a7985',
               },
               crossStyle: {
                 color: '#fff'
               }
             }
           },


           itemStyle: {
             emphasis: {
               shadowBlur: 200,
               shadowColor: "rgba(0,0,0,0.8)"
             }
           },

           xAxis: {
             type: 'category',
             boundaryGap: false,
             data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00'],

             itemStyle: {
               color: "red"
             },
             //轴文字标签
             axisLabel: {
               interval: 0,
               rotate: 50,
               show: true,
               textStyle: {
                 color: '#c2beb8',
               }
             },

             nameTextStyle: {
               color: '#B0CEFC',
               padding: 10
             },

             axisLine: {
               show: false
             },

             splitLine: {
               show: true,
               lineStyle: {
                 color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
                 width: 1,
                 type: 'solid'
               }
             },

           },

           yAxis: {
             axisLabel: {
               interval: 0,
               // rotate: 50,
               show: true,
               textStyle: {
                 color: '#c2beb8',
               }
             },
             //网格样式
             splitLine: {
               // show: false,
               lineStyle: {
                 color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
                 width: 1,
                 type: 'solid'
               }
             },

             // splitLine: {
             //   show: true,
             //   lineStyle:{
             //     // type:'dashed',
             //     color: '#f1f1f1',
             //     width: .5
             //   }
             // },
             type: 'value',
             scale: true, // 显示配置 起始最小数  最大
           },



           series: [
             {
               name: '北里莫',
               type: 'line',
               stack: '总量',
               smooth: true,
               showSymbol: false,
               symbol: "none",
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [{
                   offset: 0,
                   color: '#52ffff',
                   opacity: 0.3,
                   origin: "start"
                 }, {
                   offset: 1,
                   color: 'rgba(0,0,0,0)'
                 }])
               },

               emphasis: {
                 focus: 'series'
               },

               itemStyle: {
                 normal: {
                   lineStyle: {
                     width: 2, //调整 线条的宽度  5已经很宽啦
                     color: '#52ffff' //线条颜色
                   }
                 }
               },

               data: [120, 132, 101, 134, 90, 230, 210]
             },
             {
               name: '交换生',
               type: 'line',
               stack: '总量',
               smooth: true,
               emphasis: {
                 focus: 'series'
               },
               data: [220, 182, 191, 234, 290, 330, 310],

               showSymbol: false,
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [{
                   offset: 0,
                   color: '#48b87f',
                   opacity: 0.3,
                   origin: "start"
                 }, {
                   offset: 1,
                   color: 'rgba(0,0,0,0)'

                 }])
               },

               itemStyle: {
                 normal: {
                   lineStyle: {
                     width: 2, //调整 线条的宽度  5已经很宽啦
                     color: '#48b87f' //线条颜色
                   }
                 }
               },


             },
             {
               name: '教职工',
               type: 'line',
               stack: '总量',
               smooth: true,
               emphasis: {
                 focus: 'series'
               },

               data: [150, 11, 201, 154, 190, 330, 410],

               showSymbol: false,
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [{
                   offset: 0,
                   color: '#f7d673',
                   opacity: 0.3,
                   origin: "start"
                 }, {
                   offset: 1,
                   color: 'rgba(0,0,0,0)'

                 }])
               },

               itemStyle: {
                 normal: {
                   lineStyle: {
                     width: 2, //调整 线条的宽度  5已经很宽啦
                     color: '#f7d673' //线条颜色
                   }
                 }
               },

             },
           ]
         };
       }
     }
   },
   data() {
     return {
       chart: null
     }
   },
   watch: {
     options: {
       immediate: true,
       handler: function () {
         this.$nextTick(this.setEchartData());
       }
     }
   },
   created() {
     window.addEventListener("resize", this.mianResize)
   },
   methods: {
     /**
      * 选择日期change
      * @param e {date} 时间戳
      */
     onTimeChange(e) {

     },
     mianResize: throttle(function () {
       this.$nextTick(_ => {
         const $el = this.$refs.echartsBox || {};
         if ($el.clientHeight === undefined || $el.clientWidth === undefined) return;
         this.chart && this.chart.resize({
           height: `${$el.clientHeight}px`,
           width: `${$el.clientWidth}px`
         });
       })
     }),

     //echart options 数据 完毕调用
     setEchartData() {
       this.$nextTick(_=> {
         const chartDom = this.$refs.echartsBox || {};
         if (this.chart === null) {
           this.chart = echarts.init(chartDom)
           this.chart.setOption(this.options)
         } else {
           this.chart.clear();
           this.chart.setOption(this.options)
         }
       })

     },
   }

 }

</script>

<style scoped>

</style>